<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BuildMind AI - 智能建筑合规学习平台</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
    <div class="min-h-screen">
        <!-- 导航栏 -->
        <nav class="bg-white shadow-lg">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between h-16">
                    <div class="flex items-center">
                        <i class="fas fa-building text-blue-600 text-2xl mr-3"></i>
                        <h1 class="text-xl font-bold text-gray-900">BuildMind AI</h1>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="text-sm text-gray-600">智能学习系统</span>
                        <div id="learning-status" class="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 主要内容 -->
        <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
            <!-- 学习洞察面板 -->
            <div class="px-4 py-6 sm:px-0">
                <div class="bg-white overflow-hidden shadow rounded-lg">
                    <div class="px-4 py-5 sm:p-6">
                        <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
                            <i class="fas fa-chart-line mr-2 text-blue-600"></i>
                            AI学习洞察
                        </h3>
                        <div id="insights-panel" class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                            <!-- 动态加载洞察数据 -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- 功能演示区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- 个性化规则演示 -->
                <div class="bg-white shadow rounded-lg">
                    <div class="px-4 py-5 sm:p-6">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">
                            <i class="fas fa-user-cog mr-2 text-purple-600"></i>
                            个性化规则体验
                        </h3>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">用户专业水平</label>
                                <select id="user-level" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md">
                                    <option value="beginner">新手设计师</option>
                                    <option value="intermediate" selected>中级设计师</option>
                                    <option value="expert">资深专家</option>
                                </select>
                            </div>
                            <button onclick="loadPersonalizedRules()" class="w-full bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 transition">
                                生成个性化规则
                            </button>
                            <div id="personalized-rules" class="text-sm text-gray-600">
                                请选择用户类型并点击生成
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 规则反馈系统 -->
                <div class="bg-white shadow rounded-lg">
                    <div class="px-4 py-5 sm:p-6">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">
                            <i class="fas fa-thumbs-up mr-2 text-green-600"></i>
                            智能反馈系统
                        </h3>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">规则ID</label>
                                <input type="text" id="feedback-rule-id" placeholder="例如: fire_door_width_demo" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">反馈类型</label>
                                <select id="feedback-type" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm rounded-md">
                                    <option value="useful">有用</option>
                                    <option value="false_positive">误报</option>
                                    <option value="missed_issue">漏检</option>
                                </select>
                            </div>
                            <button onclick="submitFeedback()" class="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition">
                                提交反馈
                            </button>
                            <div id="feedback-result" class="text-sm text-gray-600"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 规则权重可视化 -->
            <div class="mt-6 bg-white shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">
                        <i class="fas fa-balance-scale mr-2 text-orange-600"></i>
                        规则权重分析
                    </h3>
                    <div id="weights-visualization" class="text-center py-8 text-gray-500">
                        加载中...
                    </div>
                </div>
            </div>

            <!-- 使用说明 -->
            <div class="mt-6 bg-white shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">
                        <i class="fas fa-info-circle mr-2 text-blue-600"></i>
                        智能功能说明
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <h4 class="font-medium text-blue-900 mb-2">自适应学习</h4>
                            <p class="text-blue-700">通过用户反馈不断优化规则权重，提高准确性</p>
                        </div>
                        <div class="bg-purple-50 p-4 rounded-lg">
                            <h4 class="font-medium text-purple-900 mb-2">个性化体验</h4>
                            <p class="text-purple-700">根据用户专业水平提供定制化规则解释和建议</p>
                        </div>
                        <div class="bg-green-50 p-4 rounded-lg">
                            <h4 class="font-medium text-green-900 mb-2">数据洞察</h4>
                            <p class="text-green-700">实时分析规则表现，提供改进建议</p>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        // API基础URL
        const API_BASE = '/api';

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadLearningInsights();
            loadWeightsVisualization();
        });

        // 加载学习洞察
        async function loadLearningInsights() {
            try {
                const response = await fetch(`${API_BASE}/ai-rules/insights`);
                const data = await response.json();
                
                const insightsPanel = document.getElementById('insights-panel');
                insightsPanel.innerHTML = `
                    <div class="bg-blue-50 p-4 rounded-lg">
                        <div class="text-2xl font-bold text-blue-600">${data.total_feedback || 0}</div>
                        <div class="text-sm text-blue-800">总反馈数</div>
                    </div>
                    <div class="bg-green-50 p-4 rounded-lg">
                        <div class="text-2xl font-bold text-green-600">${data.accuracy_rate || 0}%</div>
                        <div class="text-sm text-green-800">准确率</div>
                    </div>
                    <div class="bg-purple-50 p-4 rounded-lg">
                        <div class="text-2xl font-bold text-purple-600">${data.useful_rules || 0}</div>
                        <div class="text-sm text-purple-800">有用规则</div>
                    </div>
                    <div class="bg-red-50 p-4 rounded-lg">
                        <div class="text-2xl font-bold text-red-600">${data.false_positives || 0}</div>
                        <div class="text-sm text-red-800">误报数量</div>
                    </div>
                `;
            } catch (error) {
                console.error('加载洞察失败:', error);
            }
        }

        // 加载个性化规则
        async function loadPersonalizedRules() {
            const userLevel = document.getElementById('user-level').value;
            const rulesContainer = document.getElementById('personalized-rules');
            
            try {
                rulesContainer.innerHTML = '加载中...';
                
                const response = await fetch(`${API_BASE}/ai-rules/personalized`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        rule_set_id: 'demo-001',
                        user_expertise: userLevel
                    })
                });
                
                const data = await response.json();
                
                rulesContainer.innerHTML = `
                    <div class="text-sm">
                        <p class="font-medium text-gray-900">为${userLevel === 'beginner' ? '新手' : userLevel === 'expert' ? '专家' : '中级'}用户优化</p>
                        <p class="text-gray-600">规则数量: ${data.total_rules}</p>
                        <p class="text-green-600">✓ 已应用个性化设置</p>
                    </div>
                `;
            } catch (error) {
                document.getElementById('personalized-rules').innerHTML = '加载失败，请重试';
                console.error('加载个性化规则失败:', error);
            }
        }

        // 提交反馈
        async function submitFeedback() {
            const ruleId = document.getElementById('feedback-rule-id').value;
            const feedbackType = document.getElementById('feedback-type').value;
            const resultContainer = document.getElementById('feedback-result');
            
            if (!ruleId) {
                resultContainer.innerHTML = '<span class="text-red-600">请输入规则ID</span>';
                return;
            }

            try {
                const response = await fetch(`${API_BASE}/ai-rules/feedback`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        rule_id: ruleId,
                        feedback_type: feedbackType
                    })
                });

                const data = await response.json();
                resultContainer.innerHTML = `<span class="text-green-600">✓ ${data.message}</span>`;
                
                // 重新加载洞察数据
                loadLearningInsights();
                loadWeightsVisualization();
                
                // 清空输入
                document.getElementById('feedback-rule-id').value = '';
            } catch (error) {
                resultContainer.innerHTML = '<span class="text-red-600">提交失败，请重试</span>';
                console.error('提交反馈失败:', error);
            }
        }

        // 加载权重可视化
        async function loadWeightsVisualization() {
            try {
                const response = await fetch(`${API_BASE}/ai-rules/insights`);
                const data = await response.json();
                
                const container = document.getElementById('weights-visualization');
                
                if (data.top_performing_rules && data.top_performing_rules.length > 0) {
                    let html = '<div class="grid grid-cols-1 md:grid-cols-3 gap-4">';
                    
                    data.top_performing_rules.forEach(rule => {
                        const confidence = rule.confidence || 1.0;
                        const usage = rule.usage_count || 0;
                        const barWidth = Math.min(confidence * 50, 100);
                        
                        html += `
                            <div class="border rounded-lg p-4">
                                <div class="text-sm font-medium text-gray-900 truncate">${rule.rule_id}</div>
                                <div class="mt-2">
                                    <div class="flex justify-between text-xs text-gray-600 mb-1">
                                        <span>置信度</span>
                                        <span>${confidence.toFixed(2)}</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-blue-600 h-2 rounded-full" style="width: ${barWidth}%"></div>
                                    </div>
                                </div>
                                <div class="text-xs text-gray-500 mt-2">使用次数: ${usage}</div>
                            </div>
                        `;
                    });
                    
                    html += '</div>';
                    container.innerHTML = html;
                } else {
                    container.innerHTML = '<div class="text-gray-500">暂无数据，开始使用系统收集反馈</div>';
                }
            } catch (error) {
                console.error('加载权重可视化失败:', error);
            }
        }

        // 定期刷新数据
        setInterval(() => {
            loadLearningInsights();
            loadWeightsVisualization();
        }, 30000); // 每30秒刷新一次
    </script>
</body>
</html>